<template>
  <div>
    <!-- <u-infinite-list :items="items" :item-height="80" #default="{ sliceItems }"> -->
    <u-list :items="items"></u-list>
    <!-- </u-infinite-list> -->

    <div class="x-bottom" v-intersect="{ handler: fetchNext }"></div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import UList from "../components/UList.vue";
// import UInfiniteList from "../../../components/UInfiniteList.vue";
// 可以方便的映射topic模块下的方法
const { mapState, mapActions } = createNamespacedHelpers("topic");

export default {
  name: "u-top",
  props: ["type"],
  components: {
    UList
    // UInfiniteList
  },
  computed: {
    ...mapState({
      items: state => state[state.activeType].items
    })
  },
  // asyncData({ store, route }) {
  //   return store
  //     .dispatch("topic/FETCH_LIST_DATA", {
  //       type: route.name
  //     })
  //     .catch(e => console.error(e));
  // },
  watch: {
    type(type) {
      this.fetchData({ type });
    }
  },
  mounted() {
    this.fetchNext();
  },
  methods: {
    ...mapActions({
      fetchData: "FETCH_LIST_DATA"
    }),
    fetchNext() {
      const { type } = this;
      this.fetchData({ type });
    }
  }
};
</script>

<style scoped>
.x-bottom {
  width: 100%;
  height: 1px;
}
</style>